<template>
    <div class="proup" id="inputPP">
      <div class="ptem">
        <div class="i2d6">组件类型</div>
        <div class="i4d6">
           <el-select v-model="rel.component" placeholder="请选择">
              <el-option
                v-for="item in compOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </div>
      <v-probox-common v-model="rel.property"></v-probox-common>
      <hr>
      <div class="ptem">
        <div class="i6d6">
          <label><strong>填写设置</strong></label>
        </div>
      </div>
      <div class="ptem">
        <div class="i2d6">
          <label><input type="checkbox" v-model="rel.property.limitLen">限制字数</label>
        </div>
        <div class="i4d6">
          <input class="sm" placeholder="最少" v-model="rel.property.minLen"> ～ <input class="sm" placeholder="最多" v-model="rel.property.maxLen"> 字
        </div>
      </div>
      <hr>
      <v-probox-layout  v-model="rel.property"></v-probox-layout>
    </div>
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxLayout from './libs/pro-box-layout'

export default{
  props:["rel"],
  components:{
    'v-probox-layout':proboxLayout,
    'v-probox-common':proboxCommon
  },
  data:function(){
    return {
      compOptions:[{
          value: 'v-input',
          label: '单行文本'
        },{
          value: 'v-textarea',
          label: '多行文本'
        }]
    }
  }
}
</script>
